<template>
	<view class="">
		<view class="flex my_tabbar flex_col_center">
			<view class="sign_tabar" v-for="(item,index) in list" :key="index" @click="urlPage(item.pagePath)">
				<view class="">
					<image v-if="current==index" class="icon" :src="item.iconOnPath" :style="{width:item.size[0],height:item.size[1]}"></image>
					<image v-else class="icon" :src="item.iconPath" :style="{width:item.size[0],height:item.size[1]}"></image>
				</view>
				<text :style="{color:current==index?'#3F826C':'#CCC'}">{{item.text}}</text>
			</view>
		</view>
		<view class="tabar_height"></view>
	</view>

</template>

<script>
	var app = getApp();
	export default {
		props: ['current'],
		data() {
			return {
				tag:0,
				list: [
					{
						text: '首页',
						iconPath:'../../static/image/source1.png',
						iconOnPath:'../../static/image/source1_on.png',
						pagePath: '/pages/source/index',
						size:['48rpx','48rpx'],
					},
					{
						text: '质检报告',
						pagePath: '/pages/source/report',
						iconPath:'../../static/image/source3.png',
						iconOnPath:'../../static/image/source3_on.png',
						size:['42rpx','50rpx'],
					},
				],
				id:'',
			}
		},
		mounted(){
			this.id = uni.getStorageSync('sourceId');
		},
		methods: {
			urlPage(data) {
				uni.navigateTo({
					url: `${data}?id=${this.id}`
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.tabar_height{
		height: 138rpx;
	}
	.my_tabbar {
		position: fixed;
		bottom: 0;
		left:0;
		right:0;
		background: $white;
		z-index: 999;
		border-top: 1px solid #E6E6E7;
		.sign_tabar {
			height: 138rpx;
			justify-content: center;
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			align-items: center;
			flex-basis: 25%;
			
		}

		.label {
			position: absolute;
			background: red;
			padding:0 8rpx;
			border-radius: 20rpx;
			text-align: center;
			color:$white;
			font-size: 20rpx;
		}
		.icon{
			// width:44rpx;
			// height:44rpx;
		}
	}
</style>
